<template>
  <!-- 避免请求时候可以点击，可以不依赖于请求页及时loading，请求页低于100ms就不需要显示loading -->
  <view v-if="mask" class="page-mask" :style="maskColor" />
  <view v-if="show" class="page-ui-wrap">
    <view class="page-content">
      <image v-if="icon" class="page-icon" :src="icon" mode="scaleToFill" />
      <text class="page-text">
        {{ text }}
      </text>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  text: {
    type: String,
    default: '加载中...'
  },
  icon: {
    type: String,
    default: ''
  },
  mask: {
    type: Boolean,
    default: true
  },
  show: {
    type: Boolean,
    default: false
  },
  type: {
    type: String, // 'none' | 'loading' | 'toast'
    default: 'loading'
  },
  maskColor: {
    type: String,
    default: 'transparent' // 'rgba(0, 0, 0, 0.5)'
  }
})
</script>

<style scoped>
.page-mask {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
}

.page-ui-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  animation: fadeIn .3s ease;
}

.page-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24rpx 40rpx;
  border-radius: 10rpx;
  font-size: 26rpx;
  color: #ffffff;
  background: rgba(17, 17, 17, 0.7);
}

.page-icon {
  margin: 16rpx 50rpx;
  margin-bottom: 8px;
  width: 80rpx;
  height: 80rpx;
}

.page-text {
  text-align: center;
  color: #fff;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}
</style>
